import React, { useState } from 'react';
import InputField from '../UI/InputField';
import Button from '../UI/Button';
import './RegisterForm.css';

const RegisterForm = ({ onBackToLogin, onRegister }) => {
  const [formData, setFormData] = useState({
    nickname: '',
    email: '',
    phone: '',
    verificationCode: '',
    password: ''
  });

  const handleInputChange = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleSendCode = () => {
    console.log('发送验证码');
    // 这里可以添加发送验证码的逻辑
  };

  const handleRegister = () => {
    console.log('注册', formData);
    // 这里可以添加注册逻辑
    if (onRegister) {
      onRegister();
    }
  };

  return (
    <div className="register-form">
      <div className="register-form__header">
        <h1 className="register-form__title">
          <span className="register-form__title-main">注册 SIGNUP</span>
        </h1>
        <p className="register-form__login-prompt">
          已有帐号 <span className="register-form__login-link" onClick={onBackToLogin}>请登录</span>
        </p>
      </div>

      <div className="register-form__fields">
        <div className="register-form__field-group">
          <label className="register-form__label">用户昵称</label>
          <InputField
            type="text"
            placeholder="请输入用户昵称"
            value={formData.nickname}
            onChange={(value) => handleInputChange('nickname', value)}
            icon="user"
          />
        </div>

        <div className="register-form__field-group">
          <label className="register-form__label">电子邮箱</label>
          <InputField
            type="email"
            placeholder="请输入电子邮箱"
            value={formData.email}
            onChange={(value) => handleInputChange('email', value)}
            icon="user"
          />
        </div>

        <div className="register-form__field-group">
          <label className="register-form__label">手机号码</label>
          <InputField
            type="email"
            placeholder="请输入手机号码"
            value={formData.email}
            onChange={(value) => handleInputChange('email', value)}
            icon="user"
          />
        </div>

        <div className="register-form__field-group">
          <InputField
            type="text"
            placeholder="请输入验证码"
            value={formData.phone}
            onChange={(value) => handleInputChange('phone', value)}
            icon="user"
            showSendCode={true}
            sendCodeText="发送验证码"
            onSendCode={handleSendCode}
          />
        </div>

        <div className="register-form__field-group">
          <label className="register-form__label">密码</label>
          <InputField
            type="password"
            placeholder="请输入密码"
            value={formData.password}
            onChange={(value) => handleInputChange('password', value)}
            icon="user"
          />
        </div>
      </div>

      <div className="register-form__button-group">
        <Button
          className="register-form__register-button"
          type="primary"
          onClick={handleRegister}
        >
          注册
        </Button>
      </div>
    </div>
  );
};

export default RegisterForm;
